import React from "react";
import {message, Form, Input, Button, Checkbox, Row, Col} from 'antd';
import {Link,withRouter} from "react-router-dom";
import axios from "axios";
import Float from "../float/float";

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

const error = (msg) => {
    message.error(msg);
};

class MyLoginForm extends React.Component{
    constructor(props) {
        super(props);
    }

    onFinish = values => {
        let _this=this;
        let data={
            username:values.username,
            password:values.password,
            checked:values.remember
        }
        //允许ajax携带cookie
        axios.defaults.withCredentials=true;
        axios.post("http://localhost:8090/api/rest/consumer/login",data).then(function (response) {
            if(response.data.status==200){
                _this.props.history.push("/user/index/home");
            }else {
                error('网络故障请稍后再试');
            }
        })
    };

    onFinishFailed = errorInfo => {
        console.log(errorInfo);
    };
    render() {
        return (
                <div>
                    <Row justify="center" style={{
                        minHeight:'25vh',
                    }}>
                        <Col>
                            <Float/>
                        </Col>
                    </Row>
                    <Row justify="center">
                        <Col>
                            <Form
                                {...layout}
                                name="basic"
                                initialValues={{
                                    remember: true,
                                }}
                                onFinish={this.onFinish}
                                onFinishFailed={this.onFinishFailed}
                            >
                                <Form.Item
                                    label="Username"
                                    name="username"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your username!',
                                        },
                                    ]}
                                    style={{
                                        paddingTop: '100px',
                                        paddingRight: '40px'
                                    }}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    label="Password"
                                    name="password"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your password!',
                                        },
                                    ]}
                                    style={{
                                        paddingRight: '40px'
                                    }}
                                >
                                    <Input.Password />
                                </Form.Item>

                                <Form.Item {...tailLayout} name="remember" valuePropName="checked"
                                style={{
                                    paddingRight: "10%"
                                }}>
                                    <Checkbox>Remember me</Checkbox>
                                </Form.Item>

                                <Form.Item {...tailLayout} style={{
                                    paddingLeft: '15%'
                                }}>
                                    <Button type="primary" htmlType="submit" style={{
                                        background: "hsl(171, 80%, 41%)",
                                        border: "hsl(171, 80%, 41%)",
                                    }}>
                                        Submit
                                    </Button>
                                </Form.Item>
                                <Form.Item style={{
                                    paddingLeft: '30%'
                                }}>
                                    <Link to={"/user/register"}>
                                    <a style={{
                                        color: "hsl(171, 80%, 41%)"

                                    }}>Don't have an account?</a>
                                    </Link>
                                </Form.Item>
                            </Form>
                        </Col>
                    </Row>
                </div>
        );
    };
}

export default withRouter(MyLoginForm);